<style scoped>
.chart-line2{
    width: 100%;
    height: 300px;
}
</style>
<template>
  <!-- 合同类型 -->
  <div id="box-chartline2" class="chart-line2"></div>
</template>
<script>
import * as echarts from 'echarts';
let xAxisData = [];
let dataClass = ["护理","伤口","采集","换药","按摩"]
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i++) {
  xAxisData.push(dataClass[i/2]);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
}
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
}
export default{
    data(){
    return{
        option : {
            legend: {
                data: ['幼儿患者', '老年患者', '妇女患者', '其他'],
                left: '10%'
            },
            brush: {
                toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                xAxisIndex: 0
            },
            toolbox: {
                feature: {
                magicType: {
                    type: ['stack']
                },
                dataView: {}
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                name: '%',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
            },
            yAxis: {},
            grid: {
                bottom: 100
            },
            series: [
                {
                name: '幼儿患者',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data1
                },
                {
                name: '老年患者',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data2
                },
                {
                name: '妇女患者',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                data: data3
                },
                {
                name: '其他',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                data: data4
                }
            ]
            }
    }
    },
    mounted(){
        this.drawLine()
    },
    methods:{
        drawLine(){

            let myChart = echarts.init(document.getElementById("box-chartline2"));
            myChart.on('brushSelected', function (params) {
                var brushed = [];
                var brushComponent = params.batch[0];
                for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                    var rawIndices = brushComponent.selected[sIdx].dataIndex;
                    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                }
                myChart.setOption({
                    title: {
                    backgroundColor: '#333',
                    text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                    bottom: 0,
                    right: '10%',
                    width: 100,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                    }
                });
            });
            myChart.setOption(this.option)
        }
    }
}

</script>